<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules" label-width="90px">
				<view class="box">
					<uni-forms-item required label="分组" name="group_id">
						<picker @change="bindGroup" :range="group" range-key="group_name">
							<view class="picker-input">
								{{ group_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="小区" name="community_id">
						<picker @change="bindCommunity" :range="community" range-key="community_name">
							<view class="picker-input">
								{{ community_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="整套数量" name="number">
						<uni-number-box v-model="FormData.number" :min="1" :max="99" @change="bindNum" />
					</uni-forms-item>
					<uni-forms-item required label="每套房间数" name="doors">
						<uni-number-box v-model="FormData.doors" :min="1" :max="20" @change="bindLength" />
					</uni-forms-item>
				</view>
				<view class="box small">
					<block v-for="(item, index) in FormData.rooms" :key="index">
						<uni-forms-item required label="门牌号">
							<view class="room-input">
								<input type="text" v-model="item.home_name" placeholder="请输入门牌号" />
								<view class="delete" v-if="FormData.rooms.length > 1" @click="del(index)">
									<uni-icons type="minus" size="24" color="#e43d33"></uni-icons>
								</view>
								<view class="delete" v-else></view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="房间号">
							<view class="room-door">
								<view class="door" v-for="itm in item.rooms_list" :key="itm">
									{{ itm }}
								</view>
							</view>
						</uni-forms-item>
					</block>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			group_name: '',
			community_name: '',
			group: [],
			community: [],
			word: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			FormData: {
				home_type: 2,
				group_id: '',
				community_id: '',
				rooms_data: '',
				rooms: [{ home_name: '', rooms_list: ['A'] }],
				number: 1,
				doors: 1
			},
			rules: {
				group_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择分组'
						}
					],
					validateTrigger: 'submit'
				},
				community_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择小区'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad() {
		this.getGroup();
		this.getCommunity();
	},
	methods: {
		bindGroup(e) {
			this.FormData.group_id = this.group[e.detail.value].id;
			this.group_name = this.group[e.detail.value].group_name;
		},
		bindCommunity(e) {
			this.FormData.community_id = this.community[e.detail.value].id;
			this.community_name = this.community[e.detail.value].community_name;
		},
		bindNum(num) {
			this.FormData.number = num;
			const newNum = num - this.FormData.rooms.length;
			const list = this.word.slice(0, this.FormData.doors);
			const base = {
				home_name: '',
				rooms_list: list
			};
			if (this.FormData.rooms.length > num) {
				this.FormData.rooms = this.FormData.rooms.slice(0, newNum);
			} else {
				for (let i = this.FormData.rooms.length; i < num; i++) {
					this.FormData.rooms.push(base);
				}
			}
		},
		bindLength(num) {
			this.FormData.doors = num;
			const lister = this.word.slice(0, this.FormData.doors);
			for (let i = 0; i < this.FormData.rooms.length; i++) {
				this.FormData.rooms[i].rooms_list = lister;
			}
		},
		del(index) {
			this.FormData.rooms.splice(index, 1);
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				var roomData = this.FormData.rooms;
				var roomArr = [];
				for (let i = 0; i < roomData.length; i++) {
					roomArr.push(roomData[i].home_name);
				}
				if (roomArr.includes('')) {
					uni.showToast({
						title: '请输入门牌号',
						icon: 'none'
					});
				} else if (new Set(roomArr).size !== roomArr.length) {
					uni.showToast({
						title: '门牌号不能重复',
						icon: 'none'
					});
				} else {
					this.FormData.rooms_data = JSON.stringify(roomData);
					const data = Object.assign({}, this.FormData);
					delete data.number;
					delete data.doors;
					delete data.rooms;
					api.roomAdd(data).then((res) => {
						if (res.data.is_success) {
							uni.showToast({
								title: '添加成功'
							});
							setTimeout(() => {
								uni.hideToast();
								uni.navigateBack();
							}, 1000);
						} else {
							uni.showToast({
								title: '添加失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
				this.FormData.group_id = this.group[0].id;
				this.group_name = this.group[0].group_name;
			});
		},
		getCommunity() {
			api.communityList({}).then((data) => {
				this.community = data.data;
			});
		}
	}
};
</script>
